<template>
	<view style="height: 100%; background-color: #F1F1F1;">
		<view style="background-color:#f12711;height: 150rpx; flex:8">
			<view style="display: flex;color: #FFFFFF;font-size:35rpx;font-style:italic;font-weight:900;padding: calc(1vw) 0 0 calc(3vh)">欢迎来到原子生活!</view>
			<view style="margin-top:9rpx;">
				<!-- margin: calc(1vm) 0 0 calc(1vh) -->
				<navigator style="position:sticky;float: left;width: 65%;height: 70rpx;padding: calc(1vw) 0 0 calc(3vh);" url="navigate/navigate?title=navigate"
				 hover-class="navigator-hover">
					<button type="default" style="border-radius:20px;display: flex;position:sticky" @click="tosearch">
						<image src="../../static/search.png" style="width: 30rpx;height:30rpx;position:sticky;margin-top: 5%; vertical-align: middle;" />
						<text style="font-size:25rpx;align-items: center;padding-left: 7rpx;display: flex;position:sticky">搜索商品</text>
					</button>
				</navigator>
			</view>
		</view>
		<view>
			<swiper class="swiper" indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay="true" interval="2000"
			 duration="500">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<image :src="item.content" style="width:100%;height: 290rpx;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="isLogin">
			<view style="padding: calc(1vw) 0 0 calc(3vh);height: calc(5vh);">
				<text style="font-size: 30rpx;font-weight: 700;align-items:center;display: flex;dposition:sticky">数据罗盘</text>
			</view>
			<view>
				<view>
					<view v-if="!isShow" class="body-data back" style="display: inline-block;" @click="toMasterDetail">
						<view class="" style="display: inline-block;position:sticky">
							<image :src="user.avatar" style="width: 133rpx;height: 133rpx;"></image>
						</view>
						<view class="" style="display: inline-block;position: absolute; position:sticky">
							<view>
								<text style="margin: 0 calc(1vw) 0 calc(1vh);font-size: medium;">{{user.nickname}}</text>
							</view>
							<view style="margin-left: calc(1vw);">
								<text style="font-size: small;color: #999999;">粉丝数:</text>
								<text style="font-size: small;font-weight: 700;color: #FF0000;">{{fans}}</text>
							</view>
						</view>
					</view>
					<view v-if="!isShow">
						<button type="default" style="background-color: #FFFFFF;margin-top: 1rpx;width: calc(97vw);color: #FF0000;"
						 @click="toMasterList">查看更多</button>
					</view>
				</view>
				<view v-if="isShow">
					<view class="body-data" style="display: inline-block;">
						<button type="default" style="background-color: #FFFFFF;" @click="authDouyin">授权抖音登录</button>
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- <view>
				<view>
					<view class="body-data back" style="display: inline-block;" @click="toMasterDetail">
						<view class="" style="display: inline-block;position:sticky">
							<image :src="user.avatar" style="width: 133rpx;height: 133rpx;"></image>
						</view>
						<view class="" style="display: inline-block;position: absolute; position:sticky">
							<view>
								<text style="margin: 0 calc(1vw) 0 calc(1vh);font-size: calc(2.5vh);">{{user.nickname}}</text>
							</view>
							<view>
								<text style="margin: 0 calc(1vw) 0 calc(1vh);color: #C8C7CC;font-size: calc(1vh);">{{user.species}}</text>
							</view>
							<view>
								<text v-for="(item,index) in 3" :key=index style="font-size: calc(1vh);margin: 0 calc(1vw) 0 calc(1vh);border: #DD524D solid 4rpx;color: #DD524D;">{{user.carryingMethod}}</text>
							</view>
						</view>
						<view style="display: flex; height: calc(9vh); margin-top: calc(0.1vh);">
							<view class="body-title">
								<text style="font-size: calc(2vh);font-weight: 700">{{user.fans}}</text>
								<text style="font-size: calc(1vh);color: #C8C7CC;">粉丝数</text>
							</view>
							<view class="body-title">
								<text style="font-size: calc(2vh);font-weight: 700">￥{{user.videoCooperation}}</text>
								<text style="font-size: calc(1vh);color: #C8C7CC;">短视频合作</text>
							</view>
							<view class="body-title">
								<text style="font-size: calc(2vh);font-weight: 700">￥{{user.live}}</text>
								<text style="font-size: calc(1vh);color: #C8C7CC;">直播合作</text>
							</view>
							<view class="body-title">
								<text style="font-size: calc(2vh);font-weight: 700">{{user.servant}}%</text>
								<text style="font-size: calc(1vh);color: #C8C7CC;">纯佣合作</text>
							</view>
						</view>
					</view>
					<view>
						<button type="default" style="background-color: #FFFFFF;margin-top: 1rpx;width: calc(97vw);color: #FF0000;"
						 @click="toMasterList">查看更多</button>
					</view>
				</view>
				<view v-if="this.isLogin == 0 ? true : false">
					<view class="body-data" style="display: inline-block;">
						<button type="default" style="background-color: #FFFFFF;" @click="authDouyin">授权抖音登录</button>
					</view>
				</view>
			</view> -->
			<view style="padding: calc(1vw) 0 0 calc(3vh);height: calc(5vh);">
				<text style="font-size: 30rpx;font-weight: 700;align-items:center;display: flex;dposition:sticky">选品区</text>
			</view>
			<view style="background-color: #FFFFFF;">
				<view>
					<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
				</view>
			</view>
			<!-- <router-view></router-view> -->
			<!-- <goodsList :goodsInfo="goods"></goodsList> -->
			<view>
				<view style="display: inline-block;">
					<view class="body-data back" style="display: inline-block;height: calc(25vh);" v-for="(item,index) in goods" :key="index"
					 @click="toGoodsDetail(item)">
						<view class="" style="display: inline-block;position:sticky;width: calc(30vw);margin-top: calc(5vh);">
							<image :src="item.image ===null? 'null':item.image" style="width: calc(26vw);height: calc(15vh);"></image>
						</view>
						<view class="" style="display: inline-block;position: absolute; position:sticky;vertical-align: top;margin: calc(5vh) calc(1vw) 0 calc(1vh);width: calc(60vw);height:calc(36vw);">
							<view>
								<text style="font-size: medium; font-weight: 600;">{{item.name}}</text>
							</view>
							<!-- <view>
								<text v-for="(item,index) in 3" :key=index style="font-size: calc(1vh);margin: 0 calc(1vw) 0 calc(1vh);color:#FF0000;background-color: #ff5e62;">短视频</text>
							</view> -->
							<view style="font-size:medium;font-weight:700;color:#FF0000;">￥{{item.price}}</view>
							<view>
								<text style="font-size: medium;background-color:#CFB53B;">佣金:{{item.commission}}</text>
								<!-- <text style="font-size: calc(1vh);background-color:#CFB53B ;">销量：{{goods.sales}}件</text> -->
							</view>
							<view>
								<text style="font-size: medium;color: #CFB53B ;">{{item.shopName}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	import goodsList from "@/pages/goods/goodsList.vue"
	export default {
		components: {
			uniSegmentedControl,
			goodsList
		},
		// onPullDownRefresh() {},
		onReachBottom() {
			this.page = this.page + 1
			this.goodsList(this.index);
		},
		data() {
			return {
				tabs: [],
				info: [{
					content: 'https://images.pexels.com/photos/5415837/pexels-photo-5415837.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
				}, {
					content: 'https://images.pexels.com/photos/5415837/pexels-photo-5415837.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
				}, {
					content: 'https://images.pexels.com/photos/5415837/pexels-photo-5415837.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
				}],
				user: {},
				fans: "",
				goods: [],
				content: [],
				current: 0,
				page: 1,
				index: 0,
				isLogin: false,
				isShow: 0,
				openId: ''
			}
		},
		onShow: function() {
			this.classification();
			this.goodsList(0);
			this.isIsLogin();
		},
		onLoad: function(options) {
			this.classification();
			// this.goodsList(0);
			this.isIsLogin();
		},
		methods: {
			changeTab(index) {
				console.log('当前选中的项：' + index)
				this.goods = [];
				this.page = 1
				this.index = index
				this.goodsList(index);
			},
			classification() {
				this.$http({
					url: "/goods/category/list",
					method: "GET",
					token: false,
				}).then(res => {
					const result = res.data.data
					let classification = ['全部']
					result.forEach((item, index) => {
						classification.push(item.name)
					})
					this.tabs = classification;
				})
			},
			getMasterDataList() {
				this.$http({
					url: "/base/douyin/bind/info/list",
					method: "GET",
				}).then(res => {
					console.log('length', res.data.data.length)
					if (res.data.data.length == 0) {
						this.isShow == 0
					}
					if (res.data.data.length == 1) {
						this.isShow == 1
						console.log('res', res)
						this.user = res.data.data[0]
						this.openId = this.user.openId
						this.getFans()
					}
				});
			},
			goodsList(index) {
				if (index == 0) {
					this.$http({
						url: "/goods/list/" + this.page,
						method: "POST",
						token: false,
						data: {
							categoryId: ''
						},
					}).then(res => {
						console.log('123', res.data)
						res.data.data.list.forEach((item, index) => {
							if (this.goods.length < res.data.data.total) {
								this.goods.push(item)
							} else {
								uni.showToast({
									title: '最后',
									duration: 2000
								});
							}
						})
					});
				}
				if (index != 0) {
					this.$http({
						url: "/goods/list/" + this.page,
						method: "POST",
						token: false,
						data: {
							categoryId: index
						},
					}).then(res => {
						console.log(res.data)
						res.data.data.list.forEach((item, index) => {
							if (this.goods.length < res.data.data.total) {
								this.goods.push(item)
							} else {
								uni.showToast({
									title: '最后',
									duration: 2000
								});
							}
						})
					});
				}
			},
			getFans() {
				this.$http({
					url: "/douyin/open/data/user/fans",
					method: "POST",
					data: {
						openId: this.openId,
						dataType: 30
					},
				}).then(res => {
					let result = res.data.data
					this.fans = result.data.result_list[result.data.result_list.length - 1].total_fans
					console.log('fans', this.fans)
				})
			},
			authDouyin() {
				uni.navigateTo({
					url: "/pages/homechild/auth/douyin/douyin"
				})
			},

			toGoodsDetail(val) {
				uni.navigateTo({
					url: "/pages/goods/goodsDetails?id=" + val.id + "&userId=" + val.userId
				})
			},
			toMasterList() {
				uni.navigateTo({
					url: "/pages/master/masterList"
				})
			},
			toMasterDetail() {
				uni.navigateTo({
					url: "/pages/master/masterDetails?userId=" + this.user.userId + "&openId=" + this.openId
				})
			},
			tosearch() {
				uni.navigateTo({
					url: "/pages/goods/search"
				})
			},
			isIsLogin() {
				var that = this;
				uni.getStorage({
					key: "Admin-Token",
					success(data) {
						that.isLogin = true
						that.getMasterDataList()
					},
					fail(error) {
						console.log(error)
						that.isLogin = false
					}
				})
			}
		}
	}
</script>

<style>
	#item:active {
		color: #25ACFF;
	}

	.list {
		line-height: 30px;
		display: flex;
		font-size: calc(2vh);
		overflow-x: auto;
		justify-content: space-between;
	}

	#item {
		text-align: center;
		/* font-weight: 700; */
		flex-shrink: 0;
		white-space: nowrap;
		padding: 0 calc(11vw) 0 calc(3vw);
	}

	/* 	.item:active {
		color: #0000FF;
		text-decoration: none;
	} */

	.list::-webkit-scrollbar {
		display: none;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.body-data {
		display: flex;
		flex-direction: column;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: calc(1vh) calc(2vw) 0 calc(2vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.body-title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: calc(1vh) calc(1vw) 0 calc(1vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.back {
		background-color: #FFFFFF;
	}

	.nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
	}
</style>
